<template>
  <div>
    <div class="tip">输入车牌号或扫描二维码</div>
    <div class="plate-box"> 
      <input v-model="plateInput" type="number" @input="inputPlate()" maxlength="9" unselectable="on" />
      <div class="area">
        <span>{{plate[0]}}</span>
        <span>{{plate[1]}}</span>
        <span>{{plate[2]}}</span>
      </div>
      <div class="area">
        <span>{{plate[3]}}</span>
        <span>{{plate[4]}}</span>
        <span>{{plate[5]}}</span>
      </div>
      <div class="area">
        <span>{{plate[6]}}</span>
        <span>{{plate[7]}}</span>
        <span>{{plate[8]}}</span>
      </div>
    </div>
    <div class="unlock-wrapper">
      <button @click="unlock()" class="button scan">车牌号用车</button>
      <button class="button scan" @click="scanCode()">扫描二维码</button>
    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {
    data () {
      return {
        plateInput: '',
        plate: ['', '', '', '', '', '', '', '', '']
      }
    },
    onShow() {
      this.plateInput = ''
      this.plate = ['', '', '', '', '', '', '', '', '']
    },
    created () {

    },
    onUnload() {
      // setTimeout(() => {
      //   wx.reLaunch({
      //     url: '../index/main'
      //   })
      // },200)
    },
    methods: {
      inputPlate() {
        this.plate = this.plateInput.split('')
      },
      scanCode() {
        let _this = this
        wx.scanCode({
          onlyFromCamera: true, //不可选择相册
          success(res) {
            let result = res.result;
            let data = {
              QRCode: result
            }
            _this._bikeResult(data)
          }
        })
      },
      unlock() {
        if (!this.plateInput) {
          wx.showToast({
            title: '请输入车牌号',
            icon: 'none',
            duration: 2000,
            mask: true
          })
          return
        }
        if (this.plateInput.length != 9) {
          wx.showToast({
            title: '车牌号格式不正确',
            icon: 'none',
            duration: 2000,
            mask: true
          })
          return
        }

        let data = {
          plateNo: this.plateInput
        }
        this._bikeResult(data)
      },
      _bikeResult(data) {
        Service.getBikeDetailv3(data).then((res) => {
          if (res.code == 200) {
            let data = {
              isInForbidTravel: res.data.isInForbidTravel,
              extensionMileage: res.data.extensionMileage,
              batteryLevel: res.data.batteryLevel,
              discountType: res.data.discountType,
              bikeId: res.data.bikeId,
              alertType:res.data.alertType,
              plateNo:res.data.plateNo,
              priceRuleStr:res.data.priceRuleStr
            }
            let bikeDetails = JSON.stringify(data);
            console.log('111111')
            wx.reLaunch({
              url: '../index/main?bikeDetails='+bikeDetails
            })
          }
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .plate-box
    display flex
    width 680px
    margin 0 auto
    margin-top 70px
    height 80px
    line-height 80px
    input 
      opacity 0
      position absolute
      width 1680px
      height 80px
      left -1000px
      color #ffffff
    .area
      display flex
      flex 1
      padding 0 15px
      span 
        caret-color transparent
        font-size 50px
        text-align center
        flex 1
        height 80px
        line-height 80px
        border: 2px solid #bbbbbb
        border-right none
      span:last-child
        border-right: 2px solid #bbbbbb
  .tip
    margin-left 40px
    margin-top 70px
    font-size 30px
    color: #262626
  .img3
    width: 100%;
    height: 520px;
  .unlock-wrapper
    padding 90px 128px 0 128px
    text-align center
    .button
      display block
      width 100%
      height 90px
      line-height: 90px
      border-radius 10px
      font-size 30px
      color: #231916
      border: 2px solid #bbbbbb
      &.number
        margin-top 99px
        border: 2px solid #DDDDDD
      &.scan
        margin-top 62px
        background #febd19
</style>
